{% extends '../../common/layouts/layout.tpl' %}
{% block content %}
	<div class="container">
        <div class="column">

            <div class="page-box">
                <div class="real-form">
                    <div class="form-header">
                        <h2>实名认证</h2>
                        <p>为保证资金安全，请完成实名认证</p>
                    </div>
                    <div class="form-body">

                        <form class="layui-form" action="">
                            <div class="layui-form-item">
                                <label class="layui-form-label">姓名</label>
                                <div class="layui-input-block">
                                    <input type="text" name="name" lay-verify="NotBlank" msg="姓名不能为空" autocomplete="off"
                                           placeholder="请输入本人姓名，核实后不可修改" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">证件类型</label>
                                <div class="layui-input-block">
                                    <select name="identity_type" id="identity_type" lay-filter="NotBlank" msg="请选择证件类型">
                                        <option value=""></option>
                                        <option value="1" selected="">身份证</option>
                                        <option value="2">军官证</option>
                                        <option value="3">护照</option>
                                    </select>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">证件号码</label>
                                <div class="layui-input-block">
                                    <input type="text" name="identity_no" lay-verify="identity_no" autocomplete="off"
                                           placeholder="请输入证件号码，核实后不可修改" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">储值卡号</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="card_no" lay-verify="card_no" autocomplete="off"
                                           placeholder="请输入本人的储蓄卡号" value="6222020201010303" class="layui-input">
                                </div>
                                <div class="layui-form-mid "><a href="#">支持银行</a> </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">银行预留手机号码</label>
                                <div class="layui-input-block">
                                    <input type="text" name="mobile" lay-verify="mobile" id="mobile" value="18911305201" autocomplete="off"
                                           placeholder="请输入银行预留手机号码" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label"></label>
                                <div class="layui-input-inline">
                                    <input type="text" name="verify_code" lay-verify="verify_code" autocomplete="off"
                                           placeholder="短信验证码" class="layui-input">
                                </div>
                                <div class="f-r"><input class="but-border" onclick="sendSMS()" value="获取验证码"/></div>
                            </div>

                            <div class="layui-form-item submit-item">
                                <div class="layui-input-block">
                                <div class="layui-input-inline">
                                    <button class="layui-btn  layui-btn-normal layui-btn-big" lay-submit="" lay-filter="next" onclick="return false;">下一步</button>
                                </div>
                                <div class="layui-form-mid"><a href="#">跳过</a> </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js_assets %}
<script>
    layui.use(['form'], function () {
        var form = layui.form;

        form.verify({
            mobile : function(value){
                var reg=/^1[3|4|5|7|8][0-9]{9}$/;
                if(!reg.test(value)){
                    return '手机号码格式有误';
                }
            },
            card_no: function (value) {
                if (value.length === 0 || (/^\s+$/.test(value))) {
                    return '请填写银行卡号';
                }
                if (!(/^([1-9]{1})(\d{15}|\d{18})$/.test(value))) {
                    return '请填写正确的银行卡号';
                }
            },
            identity_no : function(value){
                //判断证件类型
                var identityType = $("#identity_type").val();
                var identityNoReg = /^(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$)$/
                if(identityType == 1){
                    if(!identityNoReg.test(value)){
                        return '身份证号格式错误';
                    }else if(value.substr(0,6) == 330381){
                        return '该证件地区禁止注册';
                    }else if(!checkBirthday(value)){
                        return '18岁以下用户禁止注册';
                    }
                }else{
                    if(value.trim().length == 0){
                        return "证件号码不能为空";
                    }
                }
            },
            NotBlank: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(!value){
                    return $(item).attr("msg");
                }
            }
        });

        //监听提交
        form.on('submit(next)', function (data) {
            $.post("/authentication", data.field, function (result) {
                if (result.status != 200) {
                    layer.msg(result.msg || "信息错误", {icon: 2, time: 2000});
                    return false
                }
                layer.msg("实名认证成功", {icon: 1, time: 2000,}, function () {
                    // window.location.href = "register_complete"
                }, 100)
            });

            //校验手机验证码
            /*$.post("/check_verify_code", data.field, function (result) {
                if (result.status != 200) {
                    layer.msg(result.msg || "验证码错误", {icon: 2, time: 500});
                    return false
                }else{
                }
                layer.msg("注册成功", {icon: 1, time: 1000,}, function () {
                    window.location.href = ""
                }, 100)
            });*/
            return false;
        });
    });

    //发送验证码
    function sendSMS() {
        var mobile = $("#mobile").val();
        $.ajax({
            url: "/common/send_sms",
            async: false,
            data: {mobile: mobile},
            type: "post",
            dataType: "json",
            contentType: "application/x-www-form-urlencoded;charset=utf-8",
            success: function (data) {
                if (data.status == 200) {
                    layer.msg("短信发送成功，请注意查收", {icon: 1, time: 1000,})
                }else{
                    layer.msg(data.msg, {icon: 1, time: 1000,})
                }

            },
            error: function (jqXHR, textStatus, errorThrown) {
            }
        });
    }
</script>
{% endblock %}